<template>
  <div class="view-permission">
    <je-modal
      v-model:visible="visible1"
      title="查看权限"
      button-align="center"
      width="400"
      height="700"
      @close="closeDialog"
    >
      <template #buttons="modal">
        <je-button type="default" @click="modal.close()">关闭</je-button>
      </template>
      <je-tree
        ref="treeview"
        :search="false"
        class="table-treeView"
        :tree-config="{
          trigger: 'cell-dblclick',
          rowField: 'id',
          parentField: 'parent',
        }"
        border="outer"
        :loading="loading"
        size="mini"
        :data="treeData"
      >
      </je-tree>
    </je-modal>
  </div>
</template>

<script>
  import { defineComponent, onMounted, ref } from 'vue';

  import { Modal, Tree, Button } from '@jecloud/ui';

  import { loadAccountPermissionTreeApi } from '@/api';

  export default defineComponent({
    name: 'ViewPermission',
    components: {
      JeModal: Modal,
      JeTree: Tree,
      JeButton: Button,
    },
    props: {
      visible: {
        type: Boolean,
        default: false,
      },
      type: {
        type: String,
        default: '',
      },
      accountId: {
        type: String,
        default: '',
      },
    },
    emits: ['update:visible'],
    setup(props, { emit }) {
      // 自己关闭对话框，修改父组件数据状态
      const closeDialog = () => {
        emit('update:visible', false);
      };
      const visible1 = ref(props.visible);
      // 得到数据
      const treeData = ref([]);
      const loading = ref(false);
      // 初始化数据
      const getDate = () => {
        loading.value = true;
        loadAccountPermissionTreeApi({ type: props.type, accountId: props.accountId }).then(
          (res) => {
            treeData.value = res.children;
            loading.value = false;
          },
        );
      };

      onMounted(() => {
        getDate();
      });

      return {
        closeDialog,
        visible1,
        treeData,
        loading,
      };
    },
  });
</script>

<style lang="less" scoped>
  .view-permission {
    :deep(.je-modal--box) {
      width: 400px !important;
      .fa-window-maximize {
        display: none;
      }
      .je-panel-item-region-top {
        border: 1px;
      }
    }
    :deep(.vxe-table--border-line) {
      border-left: 1px solid #e6e6e6 !important;
      border-top: 1px solid #e6e6e6 !important;
    }
  }
</style>
